<template>
    <page-layout>
        <template v-slot:header>
            <el-button size='small' type="success" @click="goback" >返回</el-button>
        </template>
        <el-form 
            :model="product" 
            label-width="100px" 
            size="small" 
            class="demo-ruleForm"
            ref="ruleForm"
            >
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产品名字" >
                        <el-input v-model="product.name" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产品状态" >
                        <el-input :value="product.type" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="成本价" >
                        <el-input v-model="product.pure_price" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="定价">
                        <el-input v-model="product.price" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="优惠" >
                        <el-input v-model="product.discount" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="限购" >
                        <el-input v-model="product.limit" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="上架时间">
                        <el-input v-model="product.sale_stime" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="下架时间">
                        <el-input v-model="product.sale_etime" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="类型" >
                        <el-input v-model="product.type" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="单位">
                        <el-input v-model="product.unit" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品级">
                        <el-input v-model="product.level" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产地" >
                        <el-input v-model="product.place" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品牌">
                        <el-input v-model="product.brand" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情">
                        <el-input v-model="product.detail" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="banner">
                        <el-input v-model="product.banner" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" >
                    <el-form-item label="备注">
                        <el-input v-model="product.remark" readonly></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24" style="padding-left: 50px;" >
                    <el-button  type="text" size="mini" >添加成分数据</el-button>
                </el-col> -->
                <!-- ----------------------------------------------------------- -->
            </el-row>
        </el-form>
        <h1></h1>
        <hr>
        <el-timeline style="padding-top:30px" v-for="it in approve" :key="it.time">
            <el-timeline-item :timestamp="it.updatedAt" placement="top">
            <el-card>
                <h4>{{it.remark}}</h4>
                <p>操作人：{{it.user_name}}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
        <!-- <el-table 
            :data="product.list"
            size='small'>
            <el-table-column prop="name" label="成分名字" width="120" fixed/>
            <el-table-column prop="count" label="数量" width="120">
                <template v-slot="{row}">
                    <el-input size="mini" v-model="row.count" placeholder="输入数量" />
                </template>
            </el-table-column>
            <el-table-column prop="price" label="售价" width="100"/>
            <el-table-column prop="supplier_name" label="厂商" width="120">
                <template v-slot="{row}">
                    <el-input size="mini" v-model="row.supplier_name" placeholder="输入厂商" />
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="120"/>
            <el-table-column prop="unit" label="单位" width="120"/>
            <el-table-column prop="brand" label="品牌" width="150"/>
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="150"/>
        </el-table> -->
    </page-layout>
</template>

<script>
import { productListApi,dictInfoApi,productApproveApi } from '@/apis/productApi'
export default {

    async mounted(){

       this.product = JSON.parse(sessionStorage.getItem('ProductDetail')) 
    //    console.log('this.product',this.product)
       let result = await productApproveApi(this.product.id)
       if(result.code == 200){
            this.approve = result.data.rows
            console.log('this.approve',this.approve)
       }else{
        console.log('请求失败');
       }
    },
    data(){
        return{
            product:{},
            approve:[]
        }
    },
    methods:{
        goback(){
            this.$router.back()
        }
    }
}
</script>

<style lang="less">

    .el-timeline-item__wrapper{
        width: 500px;
    }
    h4,p{
        width: 300px;
    }
    h1{
        height: 10px;
        width: 30px;
    }
    .el-timeline {
        padding-top:0 !important;
    }
    hr{
        display: block; 
        height: 1px;
        border: 0; 
        border-top: 1px solid #ccc;
    }
</style>